import { useModel, useLocation } from "umi";
import { useReactive } from "ahooks";
import { useEffect } from "react";
import { Space, Divider, Avatar, Popconfirm, Row, Col, Descriptions, Input, Pagination, Alert, Table, Card, Tooltip, Dropdown, Menu, message, Radio } from "antd";
import { Card as SemiCard, List, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh, IconDelete, IconEdit, IconGlobeStroke, IconEyeOpened, IconServer } from "@douyinfe/semi-icons";

import { GetOrganizationApplicationsByAiRole } from "../../_graphql/organizations";

const { Column } = Table;

const OrganizationApplicationByRole = () => {
    const { graphqlFetchPlatform, windowInnerHeight } = useModel("global");
    const location = useLocation();

    const state = useReactive({
        loading: false,
        apploading: false,
        roles: [],
        applications: [],
        selectedRole: "",
    });

    const loadRoles = async () => {
        state.loading = true;
        let query = `query MyQuery { a: allOrganizationApplicationRoles { totalCount nodes { oarName oarDesc } } }`;
        let res = await graphqlFetchPlatform({ query, variables: {} });
        state.roles = res?.a?.nodes || [];
        if (location?.state?.roleName) {
            state.selectedRole = state.roles.find((item) => item.oarName === location.state.roleName);
        } else {
            state.selectedRole = state.roles.find((item) => item.oarName === state.selectedRole?.oarName);
            !state.selectedRole && state.roles.length > 0 && (state.selectedRole = state.roles[0]);
        }
        state.loading = false;
    };

    useEffect(() => {
        loadRoles();
    }, []);

    const loadApplications = async () => {
        state.apploading = true;
        let res = await graphqlFetchPlatform({
            query: GetOrganizationApplicationsByAiRole,
            variables: {
                aiRole: state.selectedRole.oarName,
            },
        });
        state.applications = res?.a?.nodes || [];
        state.apploading = false;
    };

    useEffect(() => {
        state.selectedRole?.oarName && loadApplications();
    }, [state.selectedRole]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={4}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>所属角色</span>}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconRefresh />} onClick={loadRoles} />
                        </ButtonGroup>
                    }
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                >
                    <List
                        loading={state.loading}
                        dataSource={state.roles}
                        renderItem={(item, index) => {
                            return (
                                <List.Item
                                    key={index}
                                    className={`list-item ${state.selectedRole?.oarName === item.oarName ? "list-item-selected" : ""}`}
                                    main={<div style={{ color: "var(--semi-color-text-0)", fontWeight: 500 }}>{item.oarName || "-"}</div>}
                                    onClick={() => (state.selectedRole = item)}
                                ></List.Item>
                            );
                        }}
                    />
                </SemiCard>
            </Col>
            <Col span={20}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>应用列表</span>}
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
                >
                    <Table loading={state.apploading} size="small" dataSource={state.applications} rowKey="aiUuid" bordered pagination={false} scroll={{ y: cardBodyHeight - 46 }}>
                        <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                        <Column title="应用名称" dataIndex="aiName" align="left" />
                        <Column title="分类名称" dataIndex="aiClas" align="center" />
                        <Column title="适用对象" dataIndex="aiObje" align="center" />
                        <Column title="是否收费" dataIndex="isFree" align="center" width={100} render={(_) => (_ ? "免费" : "收费")} />
                        <Column title="登录状态" dataIndex="aiLogn" align="center" width={100} render={(_) => (_ === "localLogined" ? "本地登录" : "远程登录")} />
                        <Column title="开发组织" dataIndex="aiSdna" align="center" width={240} />
                        <Column title="上下架状态" dataIndex="aiStat" align="center" width={100} />
                    </Table>
                </SemiCard>
            </Col>
        </Row>
    );
};

export default OrganizationApplicationByRole;
